<template>

  <div>
    <el-row class="tac">
      <el-col :span="24">
        <!--侧边栏 :router="true" 让导航配合路由-->
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :router="true"
        >
          <!--  第一个 分组 刘明阳-->
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>客户订单</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/orderset"><span class="el-icon-document-copy"></span>订单列表</el-menu-item>
              <el-menu-item index="/home/creatorder"><span class="el-icon-edit-outline"></span>创建订单</el-menu-item>
              <el-menu-item index="/home/lookorder"><span class="el-icon-view"></span>查看订单</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--第二个分组  陈述良-->
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>运输需求</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/needUn"><span class="el-icon-edit-outline"></span>创建需求</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--第三个分组  陈述良-->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>调度中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/transport"><span class="el-icon-mouse"></span>运输单管理</el-menu-item>
              <el-menu-item index="/home/dispatchsMa"><span class="el-icon-bicycle"></span>快速派车</el-menu-item>
              <el-menu-item index="/home/vehicle"><span class="el-icon-monitor"></span>派车单看板</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--第四个分组  回单管理 陈明宽-->
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>回单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1"><span class="el-icon-office-building"></span>4-1</el-menu-item>
              <el-menu-item index="4-2"><span class="el-icon-house"></span>4-2</el-menu-item>
              <el-menu-item index="4-3"><span class="el-icon-house"></span>4-3</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--第五个分组  异常处理 陈嘉鹏-->
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>异常处理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/exception/t_track"><span class="el-icon-office-building"></span>在途跟踪</el-menu-item>
              <el-menu-item index="/home/exception/exBrief"><span class="el-icon-office-building"></span>异常处理</el-menu-item>
              <el-menu-item index="/home/exception/exDisplay"><span class="el-icon-office-building"></span>异常列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--第六个分组  财务管理 范森昊-->
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>财务管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/FinancialHome"><span class="el-icon-office-building"></span>应收账务</el-menu-item>
              <el-menu-item index="/home/receivable"><span class="el-icon-house"></span>应收对账</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--第七个分组  车辆管理 陈明宽-->
          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>车辆管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/car">车辆管理</el-menu-item>
              <el-menu-item index="/home/driver">司机管理</el-menu-item>
              <el-menu-item index="/home/receipt">回单管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>

</template>
<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
<style scoped>

</style>
